<template>
  <div class="content">
    <el-card>
      <!-- 顶部按钮&搜索 -->
      <el-row type="flex">
        <el-col>
          <el-row>
            <el-button type="primary" @click="addCategory">添加分类</el-button>
          </el-row>
        </el-col>
        <el-col>
          <el-row type="flex" justify="space-between">
            <el-input v-model="searchVal" placeholder="请输入内容" class="input-with-select" @keydown.enter.native="search">
              <el-button slot="append" icon="el-icon-search" @click="search" />
            </el-input>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row>
        <el-divider />
        <el-table border :data="formData">
          <el-table-column prop="img" label="图片">
            <template #default="{row}">
              <img class="pic" :src="row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button type="primary" @click="edit(row)">编辑</el-button>
              <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <div class="block">
          <el-pagination
            :current-page="resetPage"
            :page-size="page._limit"
            :total="total"
            layout="prev, pager, next"
            @current-change="currentChange"
          />
        </div>
      </el-row>
    </el-card>
    <DiaLog ref="dialog" :is-show-dialog.sync="isShowDialog" @reload="doReFlash" />
  </div>
</template>

<script>
import { getCategory, count, delCategory } from '@/api/category'
export default {
  data() {
    return {
      formData: [], // 获取列表信息
      page: { // 获取指定列表信息
        _limit: 2,
        _start: 0,
        title_contains: ''
      },
      total: 0, // 获取数据总数
      isShowDialog: false,
      nowData: {}, // 当前操作的数据
      searchVal: '', // 关键字
      resetPage: 1 // 当前页码
    }
  },
  created() {
    this.reload()
  },
  methods: {
    async getCategory(params) {
      const { data } = await getCategory(params)
      this.formData = data
    },
    async count() {
      const { data } = await count({ title_contains: this.page.title_contains })
      this.total = data
    },
    currentChange(page) {
      this.resetPage = page
      //   console.log(page)
      this.page._start = (page - 1) * this.page._limit
      this.getCategory(this.page)
    },
    addCategory() {
      this.isShowDialog = true
    },
    reload() { // 根据当前信息进行获取
      this.getCategory(this.page) // 获取列表信息
      this.count() // 获取数据总数
      this.resetPage = 1
    },
    edit(row) {
      this.isShowDialog = true
      // 使用父传子 数据不能进即时渲染
      // 应该在拿到数据后 使用 refs 调用组件 进行赋值
      this.$refs.dialog.formData = row
      this.$nextTick(() => {
        this.$refs.dialog.$refs.Upload.fileList = [{ url: row.image }]
      })
      // this.resetPage = 1
    },
    async del(id) {
      try {
        await this.$confirm('是否删除')
        await delCategory(id)
        this.$message.success('操作成功')
        this.page._start = 0
        this.reload()
      // this.resetPage = 1
      } catch (error) {
        console.log(error)
      }
    },
    async search() {
      // reset 获取指定列表信息
      this.page = {
        _limit: 2,
        _start: 0,
        title_contains: this.searchVal
      }
      this.reload()
      this.searchVal = ''
      // this.resetPage = 1
    },
    doReFlash() {
      this.page.title_contains = ''
      this.page._start = 0
      this.reload()
    }
  }
}
</script>

<style scoped>
.pic {
    width: 100%;
    height: 145px;
    object-fit: contain;
}
.content{
  margin: 20px;
}
</style>
